<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<script src="js/jquery.min.js"></script>
		<style>
		[v-cloak]{
			display:none;
		}
		</style>
	</head>
	<body>
		<h1>{{address}}</h1>
		<div id="app" v-cloak>
		<h2>{{address}}</h2>
		<h3>{{address}}</h3>
		<h4>{{address}}</h4>
		<h5>{{address}}</h5>
		<h6>{{address}}</h6>
		
			
			<!-- vue 实现双向绑定 -->
		<input text="text" id="address" v-model="address" />	
			
		<p>{{name}},{{age}}</p>
		<p>{{hobby.length}},{{hobby[0]}},{{hobby[hobby.length-1]}}</p>
		
		<!--  -->
		<p>
		<span v-for="o in hobby">{{o}}</span>
		</p>
		
		<p>
			<span v-for="o,i in hobby">{{i}}-{{o}}</span>
		</p>
		
		<p>{{girl}}</p>
		<p>{{girl.name}},{{girl.age}}</p>
		
		<p v-show="girl.age<18">未成年</p>
		<p v-show="girl.age>=18">成年</p>
		
		<p v-if="girl.age>=18">成年</p>
		<p v-if="girl.age<18">未成年</p>
		<p v-if="money>=1900">一线不差钱</p>
		<p v-else-if="money>=1200">二线拆迁户</p>
		<p v-else-if="money>=600">三线富豪</p>
		<p v-else>屌丝</p>
		<!-- 往常的插值表达式现在页面中 ,这是现在属性中
		   错误的原因:它是这个整体当作字符串,而不插值表达式
		   解决办法-->
		<a href="url"target="_blank">阿里网盘</a>
		<a :href="url"target="_blank">阿里网盘</a>
		
		<br />按钮<button onclick="alert('点击有惊喜')">点我</button>
		 <br />按钮<button v-on:click="show()">点我2</button>
		</div>
	</body>
</html>

<script>
	/* 创建vue对象   参数 js对象 固定  :el  */
	var vm=new Vue({
		el:"#app",
		data:{
			address:"北京颐和园",
			name:"王强",
			money:1000,
			url:"https://www.aliyundrive.com/drive",
			
			age:28,
			hobby:["红色","绿色","蓝色","黑色","橙色"],
		girl:{
			name:"漏丝",
			age:18
			
			
			
		}
		
		},
		methods:{
			show:function(){
				console.log("vue show fun");
			}
		}
		
		
	})
	
	
</script>
